<template>
		<uni-popup ref="popup">
			<view class="popup-bottom-card" :style="bottom > 0?'bottom:'+bottom+'rpx;':''">
				<view class="popup-top">
					<view>分享至</view>
					<image src="../../static/share/close.svg" mode="" @click="close"></image>
				</view>
				
				<view class="item-list">
					<view class="item" @click="shareFunc('WXSceneSession')">
						<view class="iten-icon">
							<image src="../../static/share/weixin.svg" mode=""></image>
						</view>
						<view>微信好友</view>
					</view>
					
					<view class="item" @click="shareFunc('WXSceneTimeline')">
						<view class="iten-icon">
							<image src="../../static/share/pyq.svg" mode=""></image>
						</view>
						<view>朋友圈</view>
					</view>
				</view>
				
				<view class="item-list">
						<view class="item">
							<view class="iten-icon">
								<image src="../../static/share/copy-link.svg" mode=""></image>
							</view>
							<view>复制链接</view>
						</view>
						<view class="item" @click="funItemFunc(1)">
							<view class="iten-icon">
								<image src="../../static/share/give-a-reward.svg" mode=""></image>
							</view>
							<view>打赏</view>
						</view>
						<view class="item" @click="funItemFunc(2)">
							<view class="iten-icon">
								<image src="../../static/share/report.svg" mode=""></image>
							</view>
							<view>举报</view>
						</view>
						<view class="item" @click="funItemFunc(3)">
							<view class="iten-icon">
								<image src="../../static/share/no-like.svg" mode=""></image>
							</view>
							<view>不感兴趣</view>
						</view>
						<view class="item" @click="funItemFunc(4)">
							<view class="iten-icon">
								<image src="../../static/share/no-like-auth.svg" mode=""></image>
							</view>
							<view>不喜欢作者</view>
						</view>
				</view>
			</view>
		</uni-popup>
		
		<popupTips ref="popupTipsRef" v-bind="popupTipsValue" @popupTipsOk="popupTipsOk" @popupTipsCancel="popupTipsCancel"></popupTips>

</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import { saveReport } from '@/api/posting.js'

	const props = defineProps({
		id:{
			type:Number,
			default:0
		},
		dataInfo: {
			type: Object,
			default: {}
		},
		bottom:{
			type:Number,
			default:0
		}
	})

	const popup = ref(null)
	const popupTipsRef = ref(null)
	const popupTipsValue = reactive({
		title:'',
		isTextarea:true,
		content:'',//textarea 提示文本
		popupCancel:'', //取消按钮文本
		popupConfirm:'', //确认按钮文本
		isCallback:true //是否按钮需要回调
	})

	onMounted(() => {
		
	})

	const open = () => {
		popup.value.open('bottom')
	}

	const close = () => {
		popup.value.close()
	}

	// 分享朋友圈or微信好友
	const shareFunc = (type) => {
		uni.showLoading({
			title:'分享中'
		})
		setTimeout(() => {
			popup.value.close();
			uni.hideLoading();
		},3000)
		//待接入
		// uni.share({
		// 	provider: "weixin",
		// 	scene: type,
		// 	type: 0,
		// 	href: `https://dcloud.app.chaobushi.cn/h5/#/pages/foundInfoV2/index?id=${this.dataInfo.id}`,
		// 	title: this.dataInfo.title,
		// 	summary: this.dataInfo.content,
		// 	imageUrl: this.dataInfo.imgList[0],
		// 	success: function (res) {
		// 		console.log("success:" + JSON.stringify(res));
				
		// 	},
		// 	fail: function (err) {
		// 		console.log("fail:" + JSON.stringify(err));
		// 	},
		// 	complete: function () {
		// 		uni.hideLoading();
		// 	}
		// });
	}

	const funItemFunc = (index) => {
		popup.value.close()
		if(index === 1){
			popupTipsValue.title = '打赏'
			popupTipsValue.isTextarea = false
			popupTipsValue.content = '您将消耗1潮豆为TA打call'
			popupTipsValue.cancel = '残忍拒绝'
			popupTipsValue.confirm = '大手一挥'
			popupTipsValue.isCallback = true
			popupTipsRef.value.open()
		}else if(index === 2){
			popupTipsValue.title = '举报'
			popupTipsValue.isTextarea = true
			popupTipsValue.content = '请填写举报理由'
			popupTipsValue.cancel = '狠心举报'
			popupTipsValue.confirm = '放TA一马'
			popupTipsValue.isCallback = true
			popupTipsRef.value.open()
		}else if(index === 3){
			uni.showToast({
				title: '不感兴趣',
				icon:'none'
			});
		}else if(index === 4){
			uni.showToast({
				title: '不喜欢作者',
				icon:'none'
			});
		}
	}

	//中间弹框确认按钮
	const popupTipsOk = (v) => {
		console.log('右边',v);
		if(popupTipsValue.title === '举报'){
			popupTipsRef.value.close()
		}else if(popupTipsValue.title === '打赏'){
			popupTipsRef.value.close()
			uni.showToast({
				title: '打赏成功',
				duration: 2000
			});
		}
	}
	//弹框取消按钮
	const popupTipsCancel = async (v) => {
		console.log('左边',v);
		if(popupTipsValue.title === '打赏'){
			popupTipsRef.value.close()
		}else if(popupTipsValue.title === '举报'){
			let res = await saveReport({
				artcileId:props.id,
				reportComment:v
			})
			console.log('举报结果',res)
			popupTipsRef.value.close()
			uni.showToast({
				title: '您的举报我们已收到，将会尽快进行核实',
				duration: 3000,
				icon:'none'
			});
		}
	}

	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.popup-bottom-card{
		width: 750rpx;
		/* height: calc(env(safe-area-inset-bottom) + 484rpx);; */
		position: fixed;
		left:0rpx;
		bottom: 0rpx;
		z-index: 999 !important;
		padding-top: 30rpx;
		padding-bottom: 0rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
		background: #F6F6F6;
		border-radius: 10rpx 10rpx 0 0;
		
		.popup-top{
			width: 686rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			margin: auto;
			position: relative;
			margin-bottom: 10rpx;
			@include flex(row);
			image{
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top:0;
				right: 0;
			}
		}
		.item-list{
			width: 686rpx;
			height: 140rpx;
			padding: 20rpx 0;
			margin: auto;
			@include flex(row,flex-start,center);

			.item:last-child{
				margin-right: 0rpx;
			}
			.item{
				width: 124rpx;
				height: 140rpx;
				/* border: 1rpx solid red; */
				margin-right: 6rpx;
				
				@include flex(column,space-between);

				.iten-icon{
					width: 92rpx;
					height: 92rpx;
					@include flex(row,center,center);
					background: #FFFFFF;
					border-radius: 50%;
					margin-bottom: 10rpx;
					image{
						width: 92rpx;
						height: 92rpx;
					}
				}
				>view:nth-child(2){
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
		
	}
</style>